<template>
  <Card class="bottom-right-wrap">
    <div slot="title" class="clearfix">
      <span>主周期趋势</span>
      <Button
        size="small"
        style="margin-left:5px;"
        type="error"
        class="fr"
        v-show="showDeleteLineBtn"
        @click="handleDeleteLine"
        >删除选中曲线</Button
      >
      <Poptip
        confirm
        transfer
        title="设置周期类型"
        ok-text="次周期"
        cancel-text="主周期"
        class="fr"
        @on-ok="handleSetCycle('sec')"
        @on-cancel="handleSetCycle('main')"
      >
        <Button size="small" type="primary" v-show="showDeleteLineBtn">周期描述</Button>
      </Poptip>
    </div>
    <div class="chart-box">
      <e-line :chartData="chartData" v-if="showChart" @q-click="handleELineClick" />
      <Spin fix v-show="ZZQQSLoading">加载中...</Spin>
    </div>
  </Card>
</template>
<script>
import { nanoid } from 'nanoid'
import { each, merge, some } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import { eLineOptions } from './chartOptions'
const { mapState, mapActions } = createNamespacedHelpers('tablesDay')

export default {
  name: 'tables-day-center-bottom-right',
  components: {
    ELine: () => import('@/commons/charts/ELine')
  },
  data() {
    return {
      chartData: null,
      selecteLineIndex: undefined
    }
  },
  watch: {
    ZZQQSList() {
      this.selecteLineIndex = undefined
      this.$nextTick(() => {
        this.modifyChartData()
      })
    }
  },
  computed: {
    ...mapState(['ZZQQSList', 'ZZQQSLoading', 'ZQMSList']),
    id() {
      return nanoid
    },
    showChart() {
      return this.ZZQQSList.length > 0
    },
    showDeleteLineBtn() {
      return this.selecteLineIndex != null
    }
  },
  methods: {
    ...mapActions(['modifyZZQQSList', 'removeZQMSList', 'addZQMSList']),
    modifyChartData() {
      const _xAiaxList = []
      const _len = this.ZZQQSList[0] ? this.ZZQQSList[0].length : 0
      for (let i = 1; i <= _len; i++) {
        _xAiaxList.push(i)
      }
      const _serList = []
      each(this.ZZQQSList, (item, index) => {
        let lineStyle = {}
        let itemStyle = {}
        if (this.selecteLineIndex != null) {
          if (this.selecteLineIndex === index) {
            lineStyle = {
              width: 3,
              opacity: 1
            }
            itemStyle.borderWidth = 3
          } else {
            lineStyle = {
              opacity: 0.3
            }
            itemStyle.opacity = 0.3
          }
        }

        _serList.push({
          type: 'line',
          data: item,
          lineStyle,
          itemStyle
        })
      })
      this.chartData = merge({}, eLineOptions, {
        xAxis: {
          data: _xAiaxList
        },
        series: _serList
      })
    },
    handleELineClick(params) {
      const { seriesIndex } = params
      this.selecteLineIndex = seriesIndex
      this.$nextTick(() => {
        this.modifyChartData()
      })
    },
    handleDeleteLine() {
      this.removeZQMSList(this.ZZQQSList[this.selecteLineIndex])
      this.modifyZZQQSList(this.selecteLineIndex)
    },
    filterZQMSList(data) {
      return some(this.ZQMSList, data)
    },
    filterMain() {
      let _cList = null
      for (let i = 0; i < this.ZQMSList.length; i++) {
        const { name } = this.ZQMSList[i]
        if (name === 'main') {
          _cList = this.ZQMSList[i]
          break
        }
      }
      return _cList
    },
    handleSetCycle(type) {
      const _cList = this.ZZQQSList[this.selecteLineIndex]
      const _data = {
        name: type,
        value: _cList
      }
      const _flag = this.filterZQMSList(_data)
      if (!_flag) {
        let _deleteList = this.ZZQQSList[this.selecteLineIndex]
        if (type === 'main') {
          const _mainList = this.filterMain()
          if (_mainList) {
            _deleteList = _mainList.value
          }
        }
        this.removeZQMSList(_deleteList)
        this.addZQMSList(_data)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.bottom-right-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .chart-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
</style>
